<template>
    <view class="login">
        <Navigation backType="close" />
        <view class="f fd-c ai-c mt-68">
            <view class="fs-60 mt-40 fw-800 text-color1">输入验证码</view>
            <view class="mt-16 fs-24 text-color2">验证码已发送至 +86 186****2232</view>
            <view class="mt-64">
                <u-code-input
                    v-model="code"
                    :maxlength="4"
                    :focus="true"
                    fontSize="24"
                    size="49"
                    borderColor="#DDDDDD"
                    color="#222222"
                    @finish="finish"
                ></u-code-input>
            </view>
            <view class="fs-26 mt-40" :class="seconds == 1 ? 'text-color' : 'text-color3'" @click="getCode">{{ tips }}</view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const code = ref(false);
const tips = ref('');
const seconds = ref(60);
let timer: any = null;
onMounted(() => {
    getTime();
});
function finish() {
    uni.navigateTo({ url: '/pages_login/petStatus' });
}
function getTime() {
    timer = setInterval(() => {
        if (seconds.value > 1) {
            seconds.value--;
            tips.value = `再次发送${seconds.value}s`;
        } else {
            tips.value = '发送验证码';
            clearInterval(timer);
        }
    }, 1000);
}

const getCode = () => {
    seconds.value = 60;
    tips.value = `再次发送${seconds.value}s`;
    getTime();
};

const toTelLogin = () => {
    uni.navigateTo({
        url: '/pages/login/index',
    });
};
</script>
<style lang="scss" scoped>
.login {
    background: #ffffff;
    .logo {
        background: #fabb3c;
        border-radius: 50%;
    }
    ::v-deep .u-button__text {
        font-size: 36rpx !important;
        font-weight: 600 !important;
    }
    ::v-deep .u-button {
        height: 96rpx !important;
    }
    .heng {
        background: #999999;
    }
}
</style>
